<template>
  <div>
    <el-upload
      list-type="picture-card"
      :limit="1"
      action="#"
      :http-request="uploadings"
      :on-preview="preview"
      :on-change="change"
      :file-list="fileList"
      :before-upload="before"
      :class="{ disabled: fileComputed }"
      :on-remove="remove"
    >
      <!-- 清楚组件如何使用 -->
      <!-- 清楚图片如何预览 -->
      <!-- 控制上传加号的显示隐藏 -->
      <!-- action为什么给#， 因为前面我们讲过了，
  我们要上传到腾讯云，需要自定义的上传方式,action给个#防止报错 -->
      <i class="el-icon-plus" />
    </el-upload>
    <el-progress
      v-if="showPercent"
      style="width: 180px"
      :percentage="percent"
    />
    <el-dialog title="图片" :visible.sync="showDialog">
      <img :src="imgUrl" style="width: 100%" alt="" />
    </el-dialog>
  </div>
</template>

<script>
// 引入腾讯云包
import COS from "cos-js-sdk-v5";
// 实例化
const cos = new COS({
  SecretId: "AKIDa0B7oGSP7csseBTXMwHMUN1QZT7WfngL",

  SecretKey: "UihQuABxUlnZ6NPBiz1nKejY8SWQ5UeY",
});
export default {
  data() {
    return {
      fileList: [], //把图片设置为数组
      showDialog: false, //默认显示弹层为关闭
      imgUrl: "",
      currentFilUid: "", //用一个变量 记住当前上传的图片id
      percent: 10, //当前百分比
      showPercent: false, //默认不显示进度条
    };
  },
  methods: {
    //   on-preview 点击文件列表中已上传的文件时的钩子function(file)
    //    file
    preview(file) {
      // 把file.url放到弹层的图片里面然后展示弹层
      console.log(file.url);
      // 这里应该弹出一个层 层里是点击的图片地址
      this.imgUrl = file.url;
      this.showDialog = true;
    },
    // 删除文件  将原来的文件给排除掉了 剩下的就是最新的数组了
    remove(file, fileList) {
      // file是删除之前的文件 this.fileList是删除过后的文件
      console.log(file);
      console.log(fileList);
      console.log(this.fileList);
      this.fileList = this.fileList.filter((item) => item.uid !== file.uid);
    },
    // 修改文件触发 事件此时可以用fileList 因为该方法会进来很多遍 不能每次都去push
    //    ileList因为fileList参数是当前传进来的最新参数 我们只需要将其转化成数组即可 需要转化成一个新的数组
    // [] => [...fileList] [] => fileList.map()
    // 上传成功之后 还会进来 需要实现上传代码的逻辑 这里才会成功
    change(file, fileList) {
      // 问题在于change事件会在1，添加文件触发2.上传成功时触发3.上传失败时触发
      // 逻辑没问题 数据正常,上传报错 无后续  导致页面无法展示
      // 解决多次添加图片问题  选择判断一下是否存在
      // 会出现多次添加同一个的问题
      this.fileList = fileList.map((item) => item);
      //   还没有完成上传 第二次进入是空
      // 上传成功-数据进来 -腾讯云
    },
    // 上传之前触发事件 若返回 false 或者返回 Promise 且被 reject，则停止上传。
    before(file) {
      console.log(file);
      //   所有文件上传都要校验文件类型和 大小
      //   检查文件类型
      const types = ["image/jpeg", "image/gif", "image/bmp", "image/png"];
      //   includes包含
      if (!types.includes(file.type)) {
        this.$message.error("上传图片只能是 JPG、GIF、BMP、PNG 格式!");
        return false;
      }
      // 检查文件大小
      const maxSize = 5 * 1024 * 1024;
      if (maxSize < file.size) {
        this.$message.error("图片大小最大不能超过5M");
        return false;
      }
      //   一定返回true 如果不写true就返回undifind
      this.currentFilUid = file.uid;
      this.showPercent = true;
      return true;
    },
    // 覆盖默认的上传行为，可以自定义上传的实现
    uploadings(params) {
      console.log(params.file);
      //   如果存在这个文件
      if (params.file) {
        cos.putObject(
          {
            Bucket: "hh9237-1310940217", //存储桶名称
            Region: "ap-chengdu", //地域
            Key: params.file.name, // 文件名作为key
            Body: params.file, // 将本地的文件赋值给腾讯云配置
            // 进度条
            StorageClass: "STANDARD", // 此类写死 //上传的模式类型  直接默认  标准模式
            // 箭头函数
            onProgress: (params) => {
              this.percent = params.percent * 100;
            },
          },
          (err, data) => {
            // data返回数据之后 如何处理
            console.log(err || data);
            // 如果上传成功应修改对应的url
            if (!err && data.statusCode === 200) {
              // data.statusCode===200表示上传成功

              // 修改url
              this.fileList = this.fileList.map((item) => {
                if (item.uid === this.currentFilUid) {
                  // upload为true 表示这张图片已经传完毕
                  // 保存 图片有大小
                  return { url: "http://" + data.Location, upload: true };
                }
                return item;
              });
              setTimeout(() => {
                this.showPercent = false; //隐藏进度条
                this.percent = 0; //进度归零
              }, 2000);
            }
          }
        );
      }
    },
  },
  computed: {
    //   设置计算属性  判断是否已经上传完了一张
    fileComputed() {
      return this.fileList.length === 1;
    },
  },
};
</script>

<style scoped>
.disabled .el-upload-picture-card {
  display: none;
}
</style>